<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>表单管理</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>
    <link rel="stylesheet" th:href="@{/pear/component/luminar/css/luminar.css}">

</head>
<body class="pear-container">
<div class="layui-row">
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">
                <h3>表单列表</h3>
            </div>
            <div class="layui-card-body" style="min-height: 100vh">
                <table id="form-table" lay-filter="form-table"></table>
            </div>
        </div>
    </div>
    <div class="layui-col-md8">
        <div class="layui-card">
            <div class="layui-card-header">
                <h3>表单预览</h3>
            </div>
            <div class="layui-card-body" style="min-height: 100vh">
                <div id="form-preview">
                    <p>请选择一个表单进行预览...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="form-bar">
    <button class="layui-btn layui-bg-blue layui-btn-sm" lay-event="select"><i
            class="layui-icon layui-icon-share">选择</i>
    </button>
</script>


<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:src="@{/pear/component/luminar/luminar.js}"></script>
<script th:src="@{/pear/component/luminar/js/Sortable/Sortable.js}"></script>
<script th:src="@{/pear/component/luminar/js/iceEditor/iceEditor.js}"></script>
<script th:inline="javascript">
    let baseURL = /*[[@{/}]]*/ '';
    layui.use(['formDesigner', 'table', 'layer', 'jquery'], function () {
        let layer = layui.layer;
        let formDesigner = layui.formDesigner;
        let table = layui.table;
        let $ = layui.jquery;
        if (parent.form) {
            let ds = JSON.parse(parent.form.fieldData)
            let render = formDesigner.render({
                elem: '#form-preview',
                data: ds,
                viewOrDesign: true,
            });
            render.globalDisable()
        }
        let cols = [
            [
                {
                    field: 'formName', title: '表单名称', templet: function (d) {
                        if (parent.form) {
                            if (d.formId === parent.form.formId) {
                                return `<span style="color: #00feff"> ${d.formName} <span>`;
                            }
                        }
                        return d.formName
                    }
                },
                {title: '操作', templet: '#form-bar', align: 'center'}
            ]
        ]
        table.render({
            elem: '#form-table',
            url: baseURL + 'workflow/form/list',
            type: 'get',
            where: {
                formType: 2,
            },
            page: true,
            limit: 10,
            limits: [10, 20, 30],
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            cols: cols,
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.total,
                    "data": res.data.list,
                };
            },
            response: {
                statusCode: 1000
            }
        });

        table.on('row(form-table)', function (obj) {
            let data = obj.data; // 获取当前行数据
            $.ajax({
                url: baseURL + "workflow/form/getFormById",
                data: {
                    formId: data.formId,
                },
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    if (result.code === 1000) {
                        let formStructure = JSON.parse(result.data.fieldData)
                        let render = formDesigner.render({
                            elem: '#form-preview',
                            data: formStructure,
                            viewOrDesign: true,
                        });
                        render.globalDisable()
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                },
                error: function () {
                    layer.msg('请求失败，请稍后再试', {
                        icon: 2,
                        time: 1000
                    });
                }
            });
            $('#submit_data').hide();
        });

        table.on('tool(form-table)', function (obj) {
            if (obj.event === 'select') {
                window.select(obj);
            }
        });


        //选择表单
        window.select = function (obj) {
            let loading = layer.load();
            let data = {
                "processDefinitionId": parent.processDefinitionId,
                "formId": obj.data.formId,
            }
            $.ajax({
                url: baseURL + "workflow/processFrom/setProcessForm",
                data: JSON.stringify(data),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code === 1000) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            parent.layui.table.reload("form-table");
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                },
                error: function () {
                    layer.close(loading);
                    layer.msg('请求失败，请稍后再试', {
                        icon: 2,
                        time: 1000
                    });
                }
            });
        };
    })
</script>
</body>
</html>
